<template>
  <!-- 头部 -->
  <header class="header-box">
    <!--头部第一行 搜索区域-->
    <div class="container">
      <div class="top">
        <h1 class="logoArea">
          <a class="logo" title="尚品汇" href="###" target="_blank">
            <img src="./images/xmall.png" title="xmall商城" alt="" />
          </a>
        </h1>
        <div class="searchArea">
          <div class="search-left">
            <form action="###" class="searchForm">
              <input
                type="text"
                id="autocomplete"
                class="input-error input-xxlarge"
                placeholder="请输入商品信息"
              />
              <button class="sui-btn btn-xlarge btn-danger" type="button">
                <span
                  class="iconfont icon-search"
                  style="color: #c0cbd9"
                ></span>
              </button>
            </form>
            <router-link to="/goods" class="searchInfo">全部商品</router-link>
            <router-link to="/donation" class="searchInfo">捐赠</router-link>
          </div>
          <div class="search-right">
            <span style="color: #373737">|</span>
            <div class="userLog">
              <!-- <a class="iconfont icon-nan" style="font-size: 20px"></a> -->
              <el-row class="block-col-2">
                <el-col :span="12">
                  <el-dropdown>
                    <a class="el-dropdown-link">
                      <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                      <i class="iconfont icon-nan"></i>
                    </a>
                    <el-dropdown-menu slot="dropdown" placement="bottom">
                      <el-dropdown-item
                        ><router-link to="/user"
                          >我的订单</router-link
                        ></el-dropdown-item
                      >
                      <el-dropdown-item>账号资料</el-dropdown-item>
                      <el-dropdown-item>收货地址</el-dropdown-item>
                      <el-dropdown-item>售后服务</el-dropdown-item>
                      <el-dropdown-item>我的优惠</el-dropdown-item>
                      <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </div>
            <div class="shopCartLog">
              <a
                class="iconfont icon-RectangleCopy2"
                style="font-size: 30px"
              ></a>
              <span>0</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部的第二行 -->
    <div class="bottom">
      <div class="container">
        <div class="typeList">
          <router-link to="/" style="font-weight: bolder">首页</router-link>
          <router-link to="/goods">全部</router-link>
          <a href="###">后台管理系统</a>
          <a href="###">xmall小程序</a>
          <a href="###">XPay支付系统</a>
          <a href="###">XBoot开发平台</a>
          <a href="###">宣传视频</a>
          <a href="###">GitHub</a>
          <a href="###">商用授权</a>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import './font/iconfont.css'
export default {
  name: 'Header',
}
</script>

<style lang="less" scoped>
.header-box {
  & > .container {
    width: 100%;
    height: 100px;
    background-color: #070707;

    & > .top {
      width: 1220px;
      height: 100px;
      margin: 0 auto;
      overflow: hidden;

      .logoArea {
        float: left;

        .logo {
          img {
            width: 42px;
            margin: 30px 0;
          }
        }
      }

      .searchArea {
        float: right;
        display: flex;
        margin-top: 35px;
        text-align: center;
        & > .search-left {
          display: flex;
          align-items: center;

          & > .searchForm {
            display: flex;
            overflow: hidden;
            input {
              box-sizing: border-box;
              width: 275px;
              height: 36px;
              padding: 0px 4px;
              // border-right-color: #fff;
              float: left;
              outline: none;
              border: none;
              border-radius: 5px 0 0 5px;
              // &:focus {
              //   outline: none;
              // }
            }

            button {
              height: 36px;
              width: 35px;
              background-color: #fff;
              border: none;
              color: #fff;
              float: left;
              cursor: pointer;
              // border-left-color: #fff;
              // margin-top: 2px;
              outline: none;
              border-radius: 0 5px 5px 0;
              margin-right: 20px;

              // &:focus {
              //   outline: none;
              // }
            }
          }
          & > .searchInfo {
            width: 100px;
            color: #c8c8c8;
            cursor: pointer;
            font-size: 14px;
          }
        }

        & > .search-right {
          display: flex;
          align-items: center;
          font-size: 15px;

          a {
            cursor: pointer;
            display: inline-block;
            width: 35px;
          }
          .userLog {
            margin-left: 40px;
            .el-dropdown-link {
              cursor: pointer;
              color: #409eff;
            }
            .el-icon-arrow-down {
              font-size: 12px;
            }
          }
          .shopCartLog {
            margin-left: 25px;
            span {
              display: inline-block;
              width: 20px;
              border-radius: 50%;
              background-color: #959595;
              color: #fff;
            }
          }
        }
      }
    }
  }

  & > .bottom {
    background-color: #f7f7f7;
    height: 90px;
    line-height: 30px;
    margin-top: 0;
    display: flex;
    align-items: center;
    font-size: 14px;

    .container {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .typeList {
        float: left;

        a {
          padding: 0 10px;
          text-decoration: none;

          & + a {
            border-left: 1px solid #b3aeae;
          }
        }
        a:hover {
          color: #6181e8;
        }
      }
    }
  }
}
</style>
